<template>
  <div class="next-step__wrapper">
    <img class="next-step__arrow--hover" src="@/assets/images/arrow.gif" />
    <img class="next-step__arrow" src="@/assets/images/arrow.gif" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="60"
      height="60"
      viewBox="0 0 60 60"
      fill="none"
    >
      <g filter="url(#filter0_d_1674_362)">
        <circle cx="30" cy="30" r="20" fill="white" />
        <circle cx="30" cy="30" r="19.5" stroke="#F4F7F9" />
      </g>
      <defs>
        <filter
          id="filter0_d_1674_362"
          x="0"
          y="0"
          width="60"
          height="60"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="5" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.544271 0 0 0 0 0.56849 0 0 0 0 0.625 0 0 0 0.1 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_1674_362"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_1674_362"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.next-step__wrapper {
  @apply flex items-center justify-center relative rounded-full z-10;
  .next-step__arrow,
  .next-step__arrow--hover {
    @apply absolute top-1/2 left-1/2 -translate-1/2 z-1 w-26px h-26px;
  }
  .next-step__arrow--hover {
    @apply hidden;
  }
}
</style>
